<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑步</title>
</head>

<body class="page-run">
    <!-- 数据信息 -->
    <div class="data-info">
        <p class="pd16 title fz16">目前累计跑步距离：</p>
        <div class="pl16 pr16 content">
            <span class="num" id="runNum">999.99</span>
            <span class="unit">公里</span>
        </div>
    </div>
    <!-- 地图容器 -->
    <div class="map-container" id="mapcontainer">
    </div>
    <!-- go圈圈 -->
    <div class="cicle-go" id="cicleGo">GO</div>
    <!-- 倒计时蒙层 -->
    <div class="maskCountdown" id="countdownMask">
        <p class="numCountdown" id="numCountdown">3</p>
    </div>
    <!-- 跑步中蒙层 -->
    <div class="sportPanel" id="sportPanel">
        <div class="mask-running-container dpflex fdcolumn">
            <div class="dpflex jasbetween">
                <div class="dpflex fdcolumn pd16">
                    <span class="fz16 colorfff">户外跑</span>
                    <span class="fz20 colorfff">运动中</span>
                </div>
                <div class="pd16">
                    <i class="iconfont icon-music fz24 colorfff"></i>
                    <i class="iconfont icon-list fz24 colorfff"></i>
                </div>
            </div>
            <div class="distancespan colorfff"><span id="runDistanceNum">999</span>公里</div>
            <div class="location colorfff pl16 pr16">
                <span>GPS信号度低, 数据精准度低</span>
                <span>------------</span>
                <i class="iconfont icon-map fz40" id="iconMap"></i>
            </div>
            <div class="dpflex colorfff pl16 pr16 jsaround data">
                <div class="matchspeed dpflex fdcolumn textalign">
                    <i class="iconfont icon-matchspeed fz40"></i>
                    <p>配速</p>
                    <p class="fz30" id="paceNum">----</p>
                </div>
                <div class="spendtime dpflex fdcolumn textalign">
                    <i class="iconfont icon-spendtime fz40"></i>
                    <p>用时</p>
                    <p class="fz30" id="runTimeNum">00:00:00</p>
                </div>
                <div class="calorie dpflex fdcolumn textalign">
                    <i class="iconfont icon-calorie fz40"></i>
                    <p>千卡</p>
                    <p class="fz30" id="calorieNum">000</p>
                </div>
            </div>
            <div class="stop dpflex fdcolumn btn-group" id="iconStop">
                <div class="btn-group dpflex fdcolumn jscenter">
                    <i class="iconfont icon-stop fz30"></i>
                    <span>暂停</span>
                </div>

            </div>
            <!-- 继续 & 结束 -->
            <div id="btns" class="btns">
                <div class="dpflex jsaround">
                    <div id="iconContinue" class="btn-group dpflex fdcolumn jscenter">
                        <i class="iconfont icon-play"></i>
                        <span>继续</span>
                    </div>

                    <div id="iconOver" class="btn-group dpflex fdcolumn jscenter">
                        <i class="iconfont icon-over"></i>
                        <span>结束</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- 数据面板的 地图模式蒙层 -->
    <div class="mapState" id="mapState">

    </div>
    <!-- 地图模式 - 卡片 -->
    <div id="mapCard" class="map-card">
        <h4>户外跑</h4>
        <p><span id="cardDistance">xx</span>公里</p>
        <p id="sportDate" class="date">xx-xx-xx</p>
        <div class="dpflex mt20 card-content pt16">
            <div class="flex1 dpflex fdcolumn">
                <span id="cardPace">--</span>
                <span>平均配速</span>
            </div>
            <div class="flex1 dpflex fdcolumn">
                <span id="cardTime">--</span>
                <span>用时</span>
            </div>
            <div class="flex1 dpflex fdcolumn">
                <span id="cardCalorie">--</span>
                <span>千卡</span>
            </div>
        </div>
    </div>
    <!-- 返回 -->
    <div id="backBtn" class="back-btn">
        <i class="iconfont icon-back"></i>
    </div>

    <!-- 完成 -->
    <div id="completeBtn" class="complete-btn">完成</div>
    <!-- ucm6F8NIeUmUtqRSBP6YkciKS7zzqF49 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ucm6F8NIeUmUtqRSBP6YkciKS7zzqF49">
    </script>
</body>

</html>